<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 水印示例</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<input type="file" id="upload" accept="image/*" />
<canvas id="canvas"></canvas>
<br/>

<label for="watermarkText">水印内容:</label>
<input type="text" id="watermarkText" value="水印文本" />

<label for="rotation">水印旋转角度 (度):</label>
<input type="range" id="rotation" value="45" min="0" max="360" />
<span id="rotationValue">45</span>

<label for="opacity">水印深浅:</label>
<input type="range" id="opacity" value="5" step="0.1" min="0" max="10" />
<span id="opacityValue">0.5</span>

<label for="hSpacing">列间距 (px):</label>
<input type="range" id="hSpacing" value="40" min="10" max="100" />
<span id="hSpacingValue">40</span>

<label for="vSpacing">行间距 (px):</label>
<input type="range" id="vSpacing" value="20" min="5" max="100" />
<span id="vSpacingValue">20</span>

<label for="fontSize">水印字体大小 (px):</label>
<input type="range" id="fontSize" value="20" min="5" max="100" />
<span id="fontSizeValue">20</span>

<label for="font">水印字体:</label>
<select id="font">
    <option value="KaiTi">楷体</option>
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Courier New">Courier New</option>
</select>

<button id="saveBtn">保存图片</button>


<script src="water.js"></script>
</body>
</html>
